
import Taro, { Component } from '@tarojs/taro'
import {View, Button, Input, Form} from '@tarojs/components'
import { AtSwitch } from 'taro-ui'
import {inject, observer} from '@tarojs/mobx'
import {navigateTo, showToast, isPhone, navigateBack, getStorage} from "../../utils/common";
import { IStoreProps } from '../../store/Stores'
import { AddressOutput } from '../../api/api'

import PickerArea from "../../components/PickerArea";
import './addressAdd.scss'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class AddressAdd extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    realName:	'', // 收货人姓名
    phoneNumber: '', // 手机号码
    address: '', // 详细地址
    isDefault: false, // 是否默认
    area: '',
    item: {} as AddressOutput
  }

  componentWillMount() {
    let { id } = this.$router.params
    if(id) {
      let item = getStorage('addressEditInfo')
      if(Object.keys(item).length <= 0) { showToast('参数错误'); setTimeout(() => {navigateBack()}, 2000);return }
      this.setState({ item, area: item.address.split('&&')[0], address: item.address.split('&&')[1], isDefault: item.isDefault })
    }
  }

  link = (url: string = '/pages/index/index'): void => {
    navigateTo(url)
  }

  pickerArea(res) {
    this.setState({ area: res.province.label + res.city.label + res.distract.label })
  }

  handleChange(e) {
    this.setState({ isDefault: e })
  }

  submit(e) {
    let { area, isDefault, item } = this.state
    let { realName, phoneNumber, address } = e.detail.value
    console.log(e.detail)
    console.log(realName)
    if(!realName) { showToast('请填写收货人姓名'); return }
    if(!phoneNumber) { showToast('请填写收货人号码'); return }
    if(!isPhone(phoneNumber)) { showToast('请填写正确的手机号码'); return }
    if(!area) { showToast('请选择收货地址'); return }
    if(!address) { showToast('请填写详细收货地址'); return }
    let { userStore } = this.props.stores
    userStore.saveAddress({
      input: {
        realName,
        phoneNumber,
        address: area + '&&' + address,
        isDefault,
        id: item.id
      },
      callback: () => {
        showToast('操作成功~')
        setTimeout(() => { navigateBack() }, 2000)
      }
    })
  }

  render() {
    let { isDefault, item, address, area } = this.state
    return (
      <View className='page-bg content-20'>
        <Form onSubmit={this.submit.bind(this)}>
          <View className='form-body'>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>收货人姓名</View>
              <View className='form-wrap__content'>
                <Input className='form-wrap__input' name='realName' value={item.realName} placeholderClass='placeholder-class' placeholder='请输入收货人姓名'/>
              </View>
            </View>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>手机号码</View>
              <View className='form-wrap__content'>
                <Input className='form-wrap__input' name='phoneNumber' value={item.phoneNumber} type='number' maxLength={11} placeholderClass='placeholder-class' placeholder='请输入手机号码'/>
              </View>
            </View>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>省/市/区</View>
              <View className='form-wrap__content'>
                <PickerArea onPicketArea={this.pickerArea.bind(this)} areaData={area}  />
              </View>
            </View>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>详细地址</View>
              <View className='form-wrap__content'>
                <Input className='form-wrap__input' name='address' value={address} placeholderClass='placeholder-class' placeholder='请输入详细地址' />
              </View>
            </View>
          </View>

          <View className='interval' />

          <View className='form-body'>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>设为默认地址</View>
              <View className='form-wrap__content'>
                  <AtSwitch title='' checked={isDefault} color='#409fff' onChange={this.handleChange.bind(this)} />
              </View>
            </View>
          </View>
          <Button className='circular-submit' formType='submit'>保存地址</Button>
        </Form>
      </View>
    )
  }
}
export default AddressAdd

